<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../Vue.js"></script>
    <style>
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border: 1px solid rgb(137, 137, 137);
        }

        li div img {
            width: 200px;
            height: 130px;
        }
    </style>
</head>
<div class="box">
    <ul>
        <li>
            <div><input type="checkbox" name="" id="" v-model="isin" @change="isput">全选/全不选</div>
        </li>
        <template v-for=" (i,index) in lis" :key="i.id" v-if="lis.length">
            <li >
                <!-- {{i.name}} -->
                <div>
                    <input type="checkbox" name="" id="" v-model="chlis" :value="i" @change="onput">
                </div>
                <div>
                    <img :src="i.picture" alt="">
                </div>
                <div>
                    <p>{{i.name}}</p>
                    <p style="color: red;">价格:{{i.price}}</p>
                </div>
                <div>
                    <button @click="i.count>1?i.count--:false">-</button>
                    <span>{{i.count}}</span>
                    <button @click="i.count++">+</button>
                </div>
                <div>
                    <button @click="dele(index,i.id)">delete</button>
                </div>
            </li>
        </template>
        <li v-else>没有东西了.....</li>
        <li>
            <div style="color: red;">总金额:{{sun()}}</div>
        </li>

    </ul>
    <!-- {{chlis}} -->
</div>

<body>
    <script>
        const lis = [
            {
                id: '1',
                name: '研磨机',
                price: 100,
                picture: 'https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg',
                count: 2,
            },
            {
                id: '2',
                name: '竹制品茶盘',
                price: 200,
                picture: 'https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png',
                count: 3,

            },
            {
                id: '3',
                name: '莲花温酒器',
                price: 400,
                picture: 'https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png',
                count: 1,

            },
            {
                id: '4',
                name: '龙泉青瓷茶叶罐',
                price: 150,
                picture: 'https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png',
                count: 1,
            }
        ]


        const obj = {
            data() {
                return {
                    isin: false,
                    lis,
                    chlis: []
                }
            },
            methods: {
                sun() {

                    // 累加
                    return this.chlis.reduce((accumulator, currentValue) =>
                        accumulator + currentValue.price * currentValue.count,
                        0)
                    // this.dele()
                    // let a = 0
                    // this.chlis.map(i => {
                    //     const { price, count } = i
                    //     a += price * count
                    // })
                    // return a

                    // let b = 0
                    // this.chlis.forEach(i => {

                    //     const { price, count } = i
                    //     b += price * count
                    // });
                    // return b

                },
                // 删除
                dele(index, id) {
                    this.lis.splice(index, 1)
                    this.chlis = this.chlis.filter(i => i.id != id)
                    this.onput()
                },
                isput() {
                    // console.log(this.isin);
                    // console.log(this.chlis);
                    // console.log(this.lis);

                    this.chlis = this.isin ? this.lis : []


                },
                onput() {
                    if (this.lis.length === 0) {
                        this.isin = false
                        return
                    }
                    
                    this.isin = this.lis.length === this.chlis.length
                }
            }
        }




        let app = Vue.createApp(obj).mount('.box')

    </script>
</body>

</html>